﻿function Signature(id, ro) {
	var canvas, context;

	var rec;
	var strokes = [];
	var currentstroke = [];

	this.toString = function() {
		var s = '';
		for (var i in strokes) {
			if (i > 0)
				s += '#';
			var stroke = strokes[i];
			for (var j in stroke) {
				if (j > 0)
					s += '|';
				var p = stroke[j];
				s += p.x + ',' + p.y;
			}
		}
		return s;
	}
	this.Get = this.toString;

	var pencil = new function() {
		var cp;
		var tool = this;
		this.started = false;

		this.start = function(p) {
			context.beginPath();
			context.moveTo(p.x, p.y);
			currentstroke = [];
			currentstroke[currentstroke.length] = p;
			tool.started = true;
		};

		this.move = function(p, end) {
			if (tool.started) {
				var lp = null;
				if (currentstroke.length > 0)
					lp = currentstroke[currentstroke.length - 1]
				currentstroke[currentstroke.length] = p;

				//
				context.lineTo(p.x, p.y);
				/*/
				if (end) {
				context.lineTo(p.x, p.y);
				}
				else {
				if (cp == null) {
				cp = p;
				return;
				}
				context.quadraticCurveTo(cp.x, cp.y, p.x, p.y);
				cp = null;
				}
				//*/
				context.stroke();
			}
		};

		this.end = function(p) {
			if (tool.started) {
				if (p)
					tool.move(p, true);
				tool.started = false;
				strokes[strokes.length] = currentstroke;
				currentstroke = [];
			}
		};

		this.mousedown = this.start;
		this.mousemove = this.move;
		this.mouseup = this.end;


		this.touchstart = this.start;
		this.touchmove = this.move;
		this.touchcancel = this.end;
	};

	function reset() {
		rec = GetRec(canvas);
		context.lineWidth = 2;
		context.lineJoin = 'miter';
		context.lineCap = 'round';
		context.shadowColor = '#888';
		context.shadowBlur = 1;
		//pencil.started = false;

	}

	function init() {

		canvas = el(id);

		if (!canvas) {
			alert('Error: I cannot find the canvas element!');
			return;
		}

		if (!canvas.getContext) {
			alert('Error: no canvas.getContext!');
			return;
		}

		context = canvas.getContext('2d');
		if (!context) {
			alert('Error: failed to getContext!');
			return;
		}


		reset();

		if (ro) {
			$(el(id)).addClass('readonlySig');
			return;
		}

		var touchSupport = ('ontouchstart' in window);
		if (touchSupport) {
			canvas.addEventListener('touchstart', touchevent, false);
			canvas.addEventListener('touchmove', touchevent, false);
			canvas.addEventListener('touchcancel', touchevent, false);
		}
		else {
			canvas.addEventListener('mousedown', mouseevent, false);
			canvas.addEventListener('mousemove', mouseevent, false);
			canvas.addEventListener('mouseup', mouseevent, false);
			canvas.addEventListener('mouseout', function () { pencil.end(); }, false);
		}

	}

	function mouseevent(e) {
		var p = {};
		if (e.layerX || e.layerX == 0) { // Firefox
			p.x = e.layerX;
			p.y = e.layerY;
		} else if (e.offsetX || e.offsetX == 0) { // Opera
			p.x = e.offsetX;
			p.y = e.offsetY;
		}

		p.x -= rec.x;
		p.y -= rec.y;

		var func = pencil[e.type];
		if (func) {
			func(p);
		}
	}

	function touchevent(e) {
		var p = {};
		if (e.preventDefault)
			e.preventDefault();

		if (!e.touches && !e.pageX)
			return;

		p.x = e.touches ? e.touches[0].pageX : e.pageX;
		p.y = e.touches ? e.touches[0].pageY : e.pageY;

		p.x -= rec.x;
		p.y -= rec.y;


		var func = pencil[e.type];
		if (func) {
			func(p);
		}
	}






	this.Clear = function() {
		canvas.width = canvas.width;
		strokes = [];
		currentstroke = [];
		reset();
	}

	this.DrawStroke = function(s) {
		pl = s.split('|');
		for (var i = 0; i < pl.length - 2; i++) {
			var p = pl[i].split(',');
			var p2 = pl[i + 1].split(',');
			context.moveTo(p[0], p[1]);
			context.lineTo(p2[0], p2[1]);
		}
		context.stroke();
	}

	this.Set = function(s) {
		var sl = s.split('#');
		for (var i in sl) {
			this.DrawStroke(sl[i]);
		}
	}

	init();

}